<template>
  <a-modal :title="title" :width="Modalwidth" :visible="props.isVisible" @cancel="handleCancle" @ok="handleOk"
    :maskClosable="props.maskClosable" :footer="props.isCancleBtn ? undefined : null" centered>
    <slot name="body"></slot>
    <template v-slot:closeIcon>
      <span class="iconfont icon-close"></span>
    </template>
    <template v-slot:footer v-if="buttons.length || props.isCancleBtn">
      <a-button @click="handleCancle(button)" v-if="props.isCancleBtn">
        {{ props.cancleText || "取消" }}</a-button>
      <a-button :type="button.type ? button.type : 'primary'"
        :style="{ 'background': button?.color ? button?.color : '', 'border': button?.color ? button?.color : '' }"
        @click="handleOk(button)" v-for="(button, index) in buttons" :key="index" :disabled="button.disabled"
        v-preReClick>
        {{ button.text }}</a-button>
    </template>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";
import modelProps from "./modelConfig/props";
// props
const props = defineProps(modelProps);
// emits
const emits = defineEmits(["handleOk", "handleCancle"]);
//data
let Modalwidth = ref<string>("640px");
const isVisible = ref(false);
// computed
Modalwidth = computed({
  get() {
    let val: string = props.width;
    return val == "S" ? "416px" : val == "M" ? "640px" : val == "L" ? "820PX" : "1000px"; // 'XL'
  },
} as any);
const visible = ref<boolean>(false);
const showModal = () => {
  visible.value = true;
};
const handleCancel = (e: MouseEvent) => {
  visible.value = false;
};
const handleOk = (e: MouseEvent) => {
  emits("handleOk", e);
};
const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};
watch(
  () => props.isCancleBtn,
  (val) => {
    console.log(val, 1100000);
  }
);
watch(
  () => props.isVisible,
  (val) => {
    isVisible.value = val;
  }
);

</script>

<style lang="less">
.icon-close {
  font-weight: 400;
}
</style>
